<template>
  <div class="managePurchaser" style="padding-bottom: 50px" >
    <el-row type="flex" justify="center" >
      <el-card
          v-for="item in items"
          :key="item.pid"
          shadow="hover"

      >
        <el-descriptions
            :title="item.pnickname"
            size="small"
            Style="border-color:pink"
            column="2"
            border
        >
          <template #extra>
            <el-button
                size="small"
                color="#626aef"
                plain
                text
                @click="checkOrderItemsDetails(item.pid)"
            >
              <el-icon>
                <View/>
              </el-icon>
              &nbsp;
              交易明细
            </el-button>
          </template>
          <el-descriptions-item
              label-align="center"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
          >
            <template #label>
              <el-icon>
                <Shop/>
              </el-icon>
              账号
            </template>
            {{ item.paccount }}
          </el-descriptions-item>
          <el-descriptions-item
              label-align="center"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
              :width="250"
          >
            <template #label>
              <el-icon>
                <Box/>
              </el-icon>
              邮箱
            </template>
            {{ item.pmailbox }}
          </el-descriptions-item>
          <el-descriptions-item
              label-align="center"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
          >
            <template #label>
              <el-icon>
                <Wallet/>
              </el-icon>
              余额
            </template>
            {{ item.pbalance }}
          </el-descriptions-item>
          <el-descriptions-item
              label-align="center"
              align="center"
              label-class-name="my-label"
              class-name="my-content"
          >
            <template #label>
              <el-icon>
                <Location/>
              </el-icon>
              地址
            </template>
            {{ item.paddress }}
          </el-descriptions-item>
        </el-descriptions>
      </el-card>
    </el-row>
  </div>
  <div class="transactionDrawer">
    <el-drawer
        v-model="isDrawerShow"
        direction="rtl"
        title="交易明细"
        class="transactionDrawer1"
        size="65%"
    >
      <template #default>
        <el-table
            :data="orderItemsData"
            style="width: 100%; height: 100%"
            :header-cell-style="{
              'font-size':'16px',
              'font-weight':'normal',
              'text-align':'center'
            }"
            :cell-style="{
              'font-size':'15px',
              'font-weight':'normal',
              'background-color':'lightskyblue',
              'text-align':'center'
            }"
        >
          <el-table-column prop="orderTime" label="交易时间" min-width="200px" :formatter="formatter"/>
          <el-table-column prop="goodsName" label="交易商品" min-width="200px"/>
          <el-table-column prop="supplierNickname" label="交易商家" min-width="200px"/>
          <el-table-column prop="goodsUnitPrice" label="商品单价" min-width="180px"/>
          <el-table-column prop="goodsCount" label="交易数量" min-width="150px"/>
          <el-table-column prop="orderItemAmount" label="交易总额" min-width="160px" fixed="right">
            <template v-slot="scope">
              <el-tooltip effect="customized" popper-class="my-popper">
                <el-button size="small" style="width: 120px" class="tableButton">
                  {{
                    scope.row.orderItemAmount.length > 10 ? scope.row.orderItemAmount.substring(0, 10) + '...' : scope.row.orderItemAmount
                  }}
                </el-button>
                <template #content>
                  {{ scope.row.orderItemAmount }}
                </template>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </el-drawer>
  </div>
</template>

<script setup name="ManagePurchaser">
import {ElDrawer} from "element-plus";
import { ref, reactive, onMounted } from "vue";
import {Shop, Box, View, Wallet, Location} from "@element-plus/icons-vue";
import request from "@/utils/request";


const isDrawerShow = ref(false)

let items = reactive([])

let orderItemsData = reactive([])

onMounted(() => {
  selectAll()
})

async function selectAll() {
  let result = await request.get("/t-purchaser/selectAllPurchasers")
  items.length = 0
  items.push(...result.data.data)
}

function checkOrderItemsDetails(id) {
  request.get(`/t-orderitem/selectPurchaserOrderItemsById/${id}`).then((resp) => {
    orderItemsData.length = 0
    orderItemsData.push(...resp.data)
    isDrawerShow.value = true
  })
}

function formatter(row) {
  let newTime = row.orderTime.replace("T", " ")
  return newTime
}
</script>

<style scoped>
:deep(.my-label) {
  background: skyblue !important;
  border-color: steelblue !important;
  font-size: 11px !important;
  font-weight: normal !important;
}

:deep(.my-content) {
  border-color: steelblue !important;
  font-size: 10px !important;
}

.el-card {
  align: center;
  width: 560px;
    height: 155px;
    margin-bottom: 5px;
    overflow: auto;
}

.el-button {
  font-size: 11px !important;
  font-weight: normal;
  color: mediumpurple;
}

:deep(.el-drawer) {
  background-color: lightskyblue !important;
}

:deep(.el-drawer__title) {
  font-size: 11px;
}

:deep(.el-drawer__close) {
  font-size: 11px;
}

:deep(.el-drawer__close:hover) {
  color: yellow;
}

.tableButton {
  font-size: 10px !important;
}
</style>
